<template>
	<NavBar title="设备列表"/>
	<!-- <button @click="add">111</button> -->
	
	<view class="container">
		<view class="container-main">
			
			<view class="screen">
				<!-- <view class="box_top" :class="{'back_gauge':unfold}">
					<view class="select">
						<yh-select :data="projectOrder"  v-model="form.projectId" @change="changprojectId"></yh-select>
					</view>
					<view class="select">
						<yh-select :data="supplierOrder"  v-model="form.contractId" @change="changecontractId"></yh-select>
					</view>
					<view class="unfold" @click="unfold=!unfold">
						<view class="">
							{{unfold?'收起':'展开'}}
						</view>
						<uv-icon name="arrow-down"></uv-icon>
					</view>
				</view> -->
				<!-- <view class="box-bottom" v-show="unfold">
					<view class="select select-right">
						<yh-select placeHolder="请选择设备类别" :data="categoryOrder"  v-model="form.materialGenreId" @change="changematerialGenreId"></yh-select>
					</view>
					<view class="select">
						<yh-select placeHolder="请选择状态"  :data="storeStatus"  v-model="form.status" @change="changestatus"></yh-select>
					</view>
				</view> -->
				<uv-drop-down
					ref="dropDown"
					sign="dropDown_1" 
					text-size="24rpx"
					
					text-active-color="#3c9cff"
					:extra-icon="{name:'arrow-down-fill',color:'#666',size:'26rpx'}" 
					
					:defaultValue="defaultValue" 
					:custom-style="{padding: '0 0'}" 
					@click="selectMenu"
				>
					<uv-drop-down-item name="projectOrder" type="2" :label="dropItem('projectOrder').label"
					    :value="dropItem('projectOrder').value">
					</uv-drop-down-item>
					<uv-drop-down-item name="supplierOrder" type="2" :label="dropItem('supplierOrder').label"
					    :value="dropItem('supplierOrder').value">
					</uv-drop-down-item>
				</uv-drop-down>
				<uv-drop-down-popup 
					sign="dropDown_1" 
					:click-overlay-on-close="true"
					:currentDropItem="currentDropItem" 
					@clickItem="clickItem"
					@popupChange="change"
				></uv-drop-down-popup>
				
			</view>
			<scroll-view scroll-y="true" refresher-enabled="true" @refresherrefresh="refresherrefresh" :refresher-triggered='refresh' @scrolltolower="scrolltolower" class="list" :class="{'listscroll':unfold}">
				<uv-empty mode="data" text="暂无数据" v-if="equipmentList.length==0 && isempty" ></uv-empty>
				<view class="equipment-item" v-for="(item, index) in equipmentList" :key="item.id" @click="goToDetail(item)">
				 <!-- <view class="status-tag" :class="item.status==1?'out':'in'">
				    {{ item.status==1?'已领用':'未领用' }}
				  </view> -->
				  <view class="item-header" @click="goToDetail(item)">
				    <view class="left-section">
						<view class="status-tag" :class="item.status==1?'out':'in'">
						  {{ item.status==1?'已领用':'未领用' }}
						</view>
				      <text class="equipment-title">{{ item.name }}</text>
					  <text class="division">|</text>
				      <!-- <text class="equipment-id">{{ item.code }}</text> -->
					  <l-popover placement="bottom-left" :content="item.code">
					      <view class="equipment-id" type="primary">{{item.code}}</view>
					  </l-popover>
				    </view>
				<!--    <view class="status-tag" :class="item.status==1?'out':'in'">
				      {{ item.status==1?'已领用':'未领用' }}
				    </view> -->
				  </view>
				  
				  <!-- <image class="equipment-image" src="/static/sb_image1.png" mode="widthFix"></image> -->
				  
				  <view class="info-section">
				    <!-- 位置信息 -->
				    <view class="info-row">
				      <!-- <uv-icon name="map-fill"></uv-icon> -->
				      <view class="info-text">供应商</view>
				      <view class="info-content">{{item.supplierName}}</view>
				    </view>
				    
				    <!-- 时间信息 -->
				    <view class="info-row">
				      <!-- <uv-icon name="clock"></uv-icon> -->
				      <view class="info-text">台班单价</view>
					  <view class="info-content">{{item.unitPrice}}</view>
				    </view>
				    
				    <!-- 司机信息 -->
				    <view class="info-row">
				      <!-- <uv-icon name="account"></uv-icon> -->
				      <view class="info-text">台班单位</view>
					  <view class="info-content">{{item.unit}}</view>
				    </view>
				  </view>
				  
				  
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import NavBar from '@/components/NavBar/index.vue'
	import { BASEURL } from '@/utils/request.js'
	import yhSelect from "@/components/yh-select/yh-select.vue"
	import {
	    getmaterialSingle,
	    getProjectList,
	    getsupplier,
		queryByParam,
		getqueryByParam,
		getSbmanageList,
		facilitydraw,
		facilitydrawth
	} from '@/utils/app.js'
	export default {
		components: { NavBar,yhSelect },
		onPageScroll() {
			// 滚动后及时更新位置
			this.$refs.dropDown.init();
		},
		computed: {
			dropItem(name) {
				return (name) => {
					const result = {};
					const find = this.result.find(item => item.name === name);
					if (find) {
						result.label = find.label;
						result.value = find.value;
					} else {
						result.label = this[name].label;
						result.value = this[name].value;
					}
					return result;
				}
			},
			// 获取当前下拉筛选项
			currentDropItem() {
				return this[this.activeName];
			}
		},
		data() {
			return {
				isempty:false,
				refresh:false,
				show:false,
				selectVal1:'',
				// 表示value等于这些值，就属于默认值
				defaultValue: [0, 'all', '0'],
				// 筛选结果
				result: [],
				activeName: 'projectOrder',
				projectOrder: {
				    label: '项目',
				    value: 'all',
				    activeIndex: 0,
				    color: '#333',
				    activeColor: '#2878ff',
				    child: [{
				        label: '综合排序',
				        value: 'all'
				    }]
				},
				supplierOrder: {
				    label: '合同',
				    value: 'all',
				    activeIndex: 0,
				    color: '#333',
				    activeColor: '#2878ff',
				    child: []
				},
				form:{
					projectId:'',
					contractId:'',
					status:'1'
				},
				equipmentList:[],
				categoryOrder:[],
				storeStatus:[
					{
						label: '全选',
						value:null
					},
					{
					    label: '已领用',
					    value:1
					},
					{
						label: '未领用',
						value:2
					},
					
				],
				pageNum:1,
				facilityId:'',
				contractId:'',
				unitList:[],
				tempFile:[],
				maxNum:5,
				imgFile:[],
				imgList:[],
				isShow:false,
				unit:'',
				contractName:'',
				parms:{},
				unfold:false,
				total:'',
				content:'',
				drawId:''
			};
		},
		onLoad(){
			this.getProjectData()
		},
		// onShow() {
		// 	this.pageNum = 1
		// 		this.equipmentList = []
		// 	//      this.getSbmanageLists({...this.form,pageSize:20,pageNum:this.pageNum})
		// 	this.getProjectData()
		// },
		async onPullDownRefresh() {
			
			console.log(111);
			this.pageNum = 1
			this.equipmentList = []
		    await this.getSbmanageLists({...this.form,pageSize:20,pageNum:this.pageNum})
		    uni.stopPullDownRefresh()
		},
		methods:{
			change(e) {
				console.log('弹窗打开状态：',e);
			},
			async refresherrefresh(){
				this.refresh= true
				this.pageNum = 1
				this.equipmentList = []
				await this.getSbmanageLists({...this.form,pageSize:20,pageNum:this.pageNum})
				this.refresh = false
			},

			scrolltolower(){
				if(this.equipmentList.length>=this.total) return
				// console.log('111111 ');
				this.pageNum++
				this.getSbmanageLists({...this.form,pageSize:20,pageNum:this.pageNum})
			},
			redirect(path) {
				if(path=='cheer'){
					uni.navigateTo({
					    url: `/pages/equipment/list/index?isCheer=`+true
					})
					return
				}
				if(path==='entry'){
					uni.navigateTo({
					    url: `/pages/equipment/${path}/index?projectId=`+this.form.projectId
					})
					return
				}
				if(path=='out'){
					uni.navigateTo({
					    url: `/pages/equipment/list/index?option=`+'出场'
					})
					return
				}
			    uni.navigateTo({
			        url: `/pages/equipment/${path}/index`
			    })
			},
			goToDetail(item) {
				uni.navigateTo({
					url:`/pages/equipment/refuel/index?facilityId=${item.id}&projectId=${item.projectId}&oilContractName=${item.oilContractName}&drawContractId=${item.drawContractId}&cycleId=${item.cycleId}&name=${item.name}&code=${item.code}`
				})
			  
			},
			changprojectId(e){
				this.pageNum = 1
				this.categoryOrder = []
				this.form.materialGenreId = ''
				this.form.projectId = e.value
				this.equipmentList=[]
				this.queryByParamList({projectId:e.value})
				// this.getSbmanageLists({...this.form,pageSize:20,pageNum:this.pageNum})
			},
			changecontractId(e){
				this.pageNum = 1
				this.form.contractId = e.value
				this.equipmentList=[]
				this.getSbmanageLists({...this.form,pageSize:20,pageNum:this.pageNum})
			},
			//获取项目列表
			getProjectData() {
			    getProjectList().then(res => {
			        if (res && res.code == 200) {
			            const data = res.rows.map(item => ({
			                label: item.projectName || item.name,
			                value: item.id
			            }));
						this.projectOrder.child=data
						this.form.projectId = data[0].value
						const findIndex = this.result.findIndex(item => item.name == 'projectOrder');
						// 已经存在筛选项
						if (findIndex > -1) {
							console.log(11223344);
							this.$set(this.result, findIndex, {
								name: 'projectOrder',
								label:data[0]?data[0].label:'',
								value:data[0]?data[0].value:''
							})
						} else {
							this.result.push({
								name: 'projectOrder',
								label:data[0]?data[0].label:'',
								value:data[0]?data[0].value:''
							});
						}
						// this.projectId=data[0].value
						this.queryByParamList({projectId:data[0].value})
						
			        }
			    })
			},
			// 合同
			queryByParamList(e){
				queryByParam(e).then(res=>{
					const arr = res.data.filter(item=>item.parentId != 0)
					const data = arr.map(item => ({
					    label: item.contractName,
					    value: item.id
					}));
					
					this.supplierOrder.child=data
					// this.cooperationValue = res.data[0].id
					// this.form.contractId = data[0].value
					this.form.drawContractId = data[0].value
					const findIndex = this.result.findIndex(item => item.name == 'supplierOrder');
					// 已经存在筛选项
					if (findIndex > -1) {
						console.log(11223344);
						this.$set(this.result, findIndex, {
							name: 'supplierOrder',
							label:data[0]?data[0].label:'',
							value:data[0]?data[0].value:''
						})
					} else {
						this.result.push({
							name: 'supplierOrder',
							label:data[0]?data[0].label:'',
							value:data[0]?data[0].value:''
						});
					}
					// this.getCountByGenreIdLists({projectId:this.form.projectId})
					this.getSbmanageLists({...this.form,pageSize:20,pageNum:this.pageNum})
				})
			},
			// 设备类别
			getCountByGenreIdLists(data){
				getqueryByParam(data).then(res=>{
					console.log(res,'设备类别');
					if(res.code==200){
						const dataArr =res.data.map(item=>({
							value:item.id,
							label:item.name
						}))
						this.categoryOrder=[{value:null,
							label:'全选'},...dataArr]
						const objstatus = {}
						if(this.isCheer){
							// 判断是否从列表的加油进入
							objstatus.status = 1
						}
						this.getSbmanageLists({...this.form,pageSize:20,pageNum:this.pageNum,...objstatus})
					}
				})
			},
			// 获取设备列表
			getSbmanageLists(data){
				this.isempty = false
				// 显示加载提示
				uni.showLoading({
					title: "加载中",
					mask: true
				});
				getSbmanageList(data).then(res=>{
					// 隐藏加载提示
					uni.hideLoading();
					console.log(res);
					if(res.code==200){
						this.total = res.total
						this.equipmentList = [...this.equipmentList,...res.rows]
						if(this.equipmentList.length==0){
							this.isempty = true
						}else{
							this.isempty = false
						}
					}
				})
			},
			/**
			 * 点击菜单回调处理
			 * @param {Object} item 选中项 { label,value } = e
			 */
			clickItem(e) {
				// 下面有重新赋值，所以用let
				let { label, value } = e;
				const findIndex = this.result.findIndex(item => item.name == this.activeName);
				console.log(findIndex);
				if (this.defaultValue.indexOf(value) > -1 && this[this.activeName].label) {
					label = this[this.activeName].label;
				}
				// 已经存在筛选项
				if (findIndex > -1) {
					this.$set(this.result, findIndex, {
						name: this.activeName,
						label,
						value
					})
				} else {
					this.result.push({
						name: this.activeName,
						label,
						value
					});
				}
				this.result = this.result.filter(item => this.defaultValue.indexOf(item.value) == -1);
				console.log(this.result);
				const data = {
					materialGenreId:'',
					contractId:'',
					projectId:'',
					status:''
				}
				const arr = [...this.result]
				console.log(arr);
				arr.forEach(item=>{
					const obj = {...item}
					console.log(obj);
					if(obj.name=='supplierOrder'){
						// this.form.contractId=obj.value
						this.form.drawContractId=obj.value
					}
					if(obj.name=='projectOrder'){
						this.form.projectId=obj.value
						
						this.queryByParamList({projectId:obj.value})
					}
				})
				// this.dataList=data
				this.pageNum=1
				this.equipmentList = []
				// this.getSbmanageLists({...this.dataList,pageNum:this.pageNum,pageSize:20})
			},
			/**
			 * 点击每个筛选项回调
			 * @param {Object} e { name, active, type } = e
			 */
			selectMenu(e) {
				const { name, active, type } = e;
				this.activeName = name;
				// type 等于1 的需要特殊处理：type不等于1可以忽略
				if (type == 1) {
					this.clickItem({
						name: 'vip_type',
						label: 'VIP文档',
						value: e.active ? 1 : 0
					});
				} else {
					const find = this.result.find(item => item.name == this.activeName);
					if (find) {
						const findIndex = this[this.activeName].child.findIndex(item => item.label == find.label && item.value == find.value);
						this[this.activeName].activeIndex = findIndex;
					} else {
						this[this.activeName].activeIndex = 0;
					}
				}
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	*{
		box-sizing: border-box;
	}
	.container{
		background-color: #f6f7f9;
	}
	
	:deep(.uv-dp__container) {
	    max-height: 40vh !important;   /* 使用视口单位更可靠 */
	    overflow-y: auto !important;
	    color: #F53F3F !important;
	    scrollbar-width: thin;         /* 添加滚动条样式 */
	    // scrollbar-color: #F53F3F #f5f5f5; /* 滚动条颜色 */
	}
	:deep(.uv-drop-down) {
	    background-color: #f6f7f9;
	    border-bottom: none;
	}
	::v-deep.uv-text__value.uv-line-1{
		 max-width: 300rpx !important;
		 }
.screen{
	// padding: 0 20rpx;
	// padding-top: 40rpx;
	background-color: #f6f7f9;
	.box_top{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.back_gauge{
		margin-bottom: 10rpx;
	}
	.box-bottom{
		display: flex;
		.select-right{
			// margin-right: 20rpx;
		}
	}
	.select{
		width: 340rpx;
		margin-right: 5rpx;
	}
	
	.unfold{
		display: flex;
		align-items: center;
		font-size: 30rpx;
	}
}
.list{
	padding-top: 20rpx;
	height: calc(100vh - 280rpx);
	background-color: #fff;
}
.listscroll{
 height: calc(100vh - 620rpx);	
}
.equipment-item{
		position: relative;
		width: 700rpx;
		margin: 0 auto;
		margin-bottom: 20rpx;
		// padding: 24rpx 16rpx 24rpx 30rpx;
		padding: 24rpx 0;
		background-color: #fff;
		// border: 2rpx solid #d6dde8;
		// border-radius: 32rpx;
		// box-shadow: 1px 0px 2px 1px rgba(0, 0, 0, 0.05);
		.status-tag{
			// position: absolute;
			// right: 0;
			// top: 0;
			margin-right: 20rpx;
			width: 100rpx;
			height: 40rpx;
			text-align: center;
			line-height: 40rpx;
			font-size: 28rpx;
			color: #fff;
			background-color: #fc913e;
			// border-radius: 40rpx;
			border-top-right-radius: 8rpx;
			border-bottom-left-radius: 8rpx;
		}
		.in{
			background-color: #18cc3a;
			// color: #00B42A;
		}
		.item-header{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.left-section{
				display: flex;
				align-items: center;
				flex: 1;
			}
			.equipment-title{
				max-width: 300rpx;
				// margin-right: 10rpx;
				font-size: 30rpx;
				font-weight: bold;
				overflow: hidden;
				 text-overflow: ellipsis;
				 white-space: nowrap;
			}
			.division{
				padding: 0 10rpx;
			}
			.equipment-id{
				width: 200rpx;
				font-size: 30rpx;
				 overflow: hidden;
				  text-overflow: ellipsis;
				  white-space: nowrap;
			}
			// .status-tag{
			// 	width: 100rpx;
			// 	height: 40rpx;
			// 	text-align: center;
			// 	line-height: 40rpx;
			// 	font-size: 24rpx;
			// 	color: #F53F3F;
			// 	background-color: #FFECE8;
			// 	// border-radius: 40rpx;
			// }
			// .in{
			// 	background-color: #E8FFEA;
			// 	color: #00B42A;
			// }
			
		}
		.equipment-image{
				width: 440rpx;
				margin: 28rpx 104rpx;
			}
			.info-section{
				.info-row{
					height: 48rpx;
					display: flex;
					align-items: center;
				}
				.circle-icon{
					width: 32rpx;
					margin-left: 40rpx;
				}
				.info-text{
					// flex: 1;
					margin-right: 20rpx;
					width: 120rpx;
					font-size: 30rpx;
					font-weight: normal;
					color: #72767C;
					text-align-last: justify;
					// margin-left: 8rpx;
				}
				.info-content{
					
					width: 492rpx;
					white-space:nowrap;       /* 使文本不可换行 */
					    overflow:hidden;          /* 隐藏溢出部分 */ 
					    text-overflow:ellipsis; 
					font-size: 30rpx;
				}
			}
		}
		.action-buttons{
			margin-top: 10rpx;
			display: flex;
			justify-content: right;
			.action-btn{
				// width: 124rpx;
				padding: 0 20rpx;
				height: 66rpx;
				font-size: 28rpx;
				text-align: center;
				line-height: 66rpx;
				border-radius: 12rpx;
				color: #39C75A;
				background-color: #E8FFEA;
			}
			.fuel-btn{
				margin-right: 20rpx;
				// width: 184rpx;
				color: #165DFF;
				background-color: #E8F3FF;
			}
			.draw{
				width: 170rpx;
			}
			.metering{
				margin-right: 20rpx;
			}
			.in-btn{
				background-color: #FFECE8;
				color: #F53F3F;
			}
}

</style>
